<template>
	
    <div class="Lo_myorder">
    	<transition name="slide">
    	  <router-view class="view-box"></router-view>
    	</transition>
        <header class="Lo_myorder_header">
            <p @click='morder_to_back' class="morder_to_back">
            	<img src="../../../static/imgs/return.png"/>
            </p>
            <p>我的预约</p> 
            <p></p>
        </header>
        <nav class="Lo_myorder_nav01">
            <ul>
                <li v-for='(item,index) in items' @click="$router.push({path:item.path})"
                	@touchstart="Iscolor=index"
                	:class="{itemColor:Iscolor==index}">
                	{{item.text}}
                </li>
               
            </ul>
        </nav>
    </div>
</template>
<script >
     export default {
        name:'index',
        data(){
        	return {
        		Iscolor:0,
        		items:[
        			{text:'全部',path:'/Lo_myorder'},
        			{text:'待付款',path:'/Lo_myorder_No_comment'},
        			{text:'待服务',path:'/Lo_myorder_No_payment'},
        			{text:'待评价',path:'/Lo_myorder_No_serve'}
        		]
        	}
        },
        methods:{
	        morder_to_back:function(){
	            this.$router.push({path:"/Login"})
	        }

	    }
    }

</script>
<style scoped lang='less'>
    .slide-enter{
    	transform: translateX(100%);
    }
    .slide-enter-active{
    	transition: all .3s ease;
    }
    
   /*.slide-leave{
    	transform: translateX(-100%);
    }*/
    
    .slide-leave-active{
    	transform: translateX(-100%);
    	transition: all .5s ease;
    }

  

.PxToRem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.Lo_myorder{
	 position: relative;
	 height: 100%;
	  .view-box{
   	          position: absolute;
   	          .PxToRem(top,180);
   	        
   	          right: 0;
   	          left: 0;
          }
	   
		.active{
		    color: #26c8a7;
		    border-bottom: 5px solid #26c8a7; 
		}
		.Lo_myorder_header{
		    .PxToRem(height,88);
		    .PxToRem(font-size,28);
		    .Flex;
		    justify-content: space-between;
		    align-items: center;
		    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
		    position: fixed;
		    padding-left: 2%;
		    top: 0;
		    width: 100%;
		    border-bottom: 1px solid #e6e6e6;
		    p:nth-child(1){
		        flex: 1;
		        img{
		            .PxToRem(width,55);
		            .PxToRem(height,53);
		        }
		    }
		    p:nth-child(2){
		        flex: 6;
		        .PxToRem(font-size,35);
		    }
		    p:nth-child(3){
		        flex: 1;
		    }
		}
		.Lo_myorder_nav01{
		     background: #fff;
		     ul{
		     	  position: absolute;
		     	  .PxToRem(top,88);
   	              right: 0;
   	              left: 0;
		         .Flex;
		         position: fixed;
		         .PxToRem(top,88);
		         .PxToRem(line-height,145);
		         text-align: center;
		         justify-content: space-around;
		         .PxToRem(height,145);
		         .PxToRem(font-size,38);
		         
		         li.itemColor{
			     	color:  #009688;
			     	border-bottom: 3px solid #009688;
			     }
		         li:nth-child(1){
		            .PxToRem(width,180);
		            .PxToRem(height,145);
		         }
		         li:nth-child(2){
		            .PxToRem(width,180);
		            .PxToRem(height,145);
		         }
		         li:nth-child(3){
		            .PxToRem(width,180);
		            .PxToRem(height,145);
		         }
		         li:nth-child(4){
		            .PxToRem(width,180);
		            .PxToRem(height,145);
		         }
		      }
		   }
}
/*背景色*/
html,body{
    width:100%;
    height: 100%;
    background: #f0f2f5;
}

</style>



